<template>
  <!--拟态-->
  <el-dialog
    v-model="formModel"
    title="订单详情"
    :visible.sync="dialogFormVisible"
    :before-close="handleClose"
  >
    <el-form :model="formModel" status-icon label-width="100px" ref="dataForm">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="订单信息" name="listinfo">
          <el-form-item label="订单ID" prop="id">
            <el-input v-model.number="formModel.id" @input="change" :disabled="true"/>
          </el-form-item>
          <el-form-item label="物流单号" prop="expressSn">
            <el-input v-model="formModel.expressSn" @input="change" :disabled="true"/>
          </el-form-item>
          <el-form-item label="详细地址" prop="addressInfo">
            <el-input v-model="formModel.addressInfo" @input="change" :disabled="true"/>
          </el-form-item>
          <el-form-item label="订单编号" prop="ordersSn">
            <el-input v-model="formModel.ordersSn" @input="change" :disabled="true"/>
          </el-form-item>
          <el-form-item label="订单状态" prop="ordersStatus">
            <!--<el-input v-model="formModel.ordersStatus" @input="change"/>-->
            <el-tag type="success" v-if="formModel.ordersStatus === -10">已过期</el-tag>
            <el-tag v-else-if="formModel.ordersStatus === -1" size="small">已取消</el-tag>
            <el-tag v-else-if="formModel.ordersStatus === 1" size="small">已付款</el-tag>
            <el-tag v-else-if="formModel.ordersStatus === 10" size="small">待发货</el-tag>
            <el-tag v-else-if="formModel.ordersStatus === 20" size="small">已发货</el-tag>
            <el-tag v-else-if="formModel.ordersStatus === 30" size="small">进行中</el-tag>
            <el-tag v-else-if="formModel.ordersStatus === 50" size="small">待评价</el-tag>
            <el-tag v-else-if="formModel.ordersStatus === 100" size="small">已完成</el-tag>
            <el-tag v-else size="small">无</el-tag>
          </el-form-item>
          <el-form-item label="订单类型" prop="ordersType">
            <!-- <el-input v-model="formModel.ordersType" @input="change"/>-->
            <el-tag type="success" v-if="formModel.ordersType === 0">普通订单</el-tag>
            <el-tag v-else-if="formModel.ordersType === 1" size="small">分期订单</el-tag>
            <el-tag v-else-if="formModel.ordersType === 2" size="small">抢购订单</el-tag>
            <el-tag v-else-if="formModel.ordersType === 5" size="small">转卖订单</el-tag>
            <el-tag v-else size="small">无</el-tag>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formModel.phone" @input="change" :disabled="true"/>
          </el-form-item>
          <el-form-item label="收件人" prop="recipientName">
            <el-input v-model="formModel.recipientName" @input="change" :disabled="true"/>
          </el-form-item>
          <el-form-item label="总金额" prop="totalPrice">
            <el-input v-model="formModel.totalPrice" @input="change" :disabled="true"/>
          </el-form-item>
          <!--<el-form-item label="是否启用规格">
            <el-radio-group v-model="formModel.enableFlag">
              <el-radio :label="true" border @change="change">可用</el-radio>
              <el-radio :label="false" border @change="change">禁用</el-radio>
            </el-radio-group>
          </el-form-item>-->
        </el-tab-pane>
        <el-tab-pane label="商品详情" name="goodsinfo">
          <el-row
            type="flex"
            class="list-info-el-row-form-item"
            style="flex-wrap: wrap; justify-content: space-between;"
          >
            <el-col
              :md="11"
              v-for="(item,i) in formModel.itemList"
              :key="i"
              class="el-col-form-item"
            >
              <div style="text-align: center">
                <i class="el-icon-goods"></i>
                商品{{i+1}}
              </div>
              <el-form-item label="商品图片">
                <div class="order_goods_list_img">
                  <img v-if="item.productImage" :src="item.productImage">
                  <i v-else class="el-icon-picture-outline"></i>
                </div>
              </el-form-item>
              <el-form-item label="商品名称">
                <el-input v-model="item.productName" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="规格属性">
                <el-input v-model="item.productAttributes" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="商品价格">
                <el-input v-model="item.unitPrice" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="购买数量">
                <el-input v-model="item.num" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="小计">
                <el-input v-model="item.totalPrice" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cliearvisible">取 消</el-button>
    </div>
  </el-dialog>
  <!--end拟态-->
</template>

<script>
export default {
  name: "ListInfo",
  data() {
    return {
      dialogFormVisible: true,
      activeName: "listinfo",
      formModel: {
        //数据模型
        addressInfo: "", // 详细地址
        expressSn: "", // 物流单号
        id: 0,
        itemList: [
          //订单商品详情明细
          {
            num: 0, // 购买数量
            productAttributes: "", // 商品规格属性
            productImage: "", // 商品图片
            productName: "", // 商品名
            totalPrice: 0, // 小计/总计
            unitPrice: 0 // 商品价格
          },
          {
            num: 0, // 购买数量
            productAttributes: "", // 商品规格属性
            productImage: "", // 商品图片
            productName: "", // 商品名
            totalPrice: 0, // 小计/总计
            unitPrice: 0 // 商品价格
          },
          {
            num: 0, // 购买数量
            productAttributes: "", // 商品规格属性
            productImage: "", // 商品图片
            productName: "", // 商品名
            totalPrice: 0, // 小计/总计
            unitPrice: 0 // 商品价格
          }
        ],
        ordersSn: "", // 订单编号
        ordersStatus: 0, // 订单状态(-10:已过期;-1:已取消;0:待付款;1:已付款;10:待发货;20:已发货;30:进行中;50:待评价;100:已完成)
        ordersType: 0, // 订单类型(0:普通订单;1:分期订单;2:抢购订单;5:转卖订单)
        phone: "", // 手机号
        recipientName: "", // 收件人
        totalPrice: 0 // 总金额
      },
      title: "",
      currenindex: 0
    };
  },
  mounted() {},
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(res => {
          this.$emit("refreshDataList");
        })
        .catch(err => {});
    },
    change() {
      // 刷新form表单
      this.$forceUpdate();
    },
    cliearvisible() {
      //点击取消按钮
      this.$emit("refreshDataList");
    },
    async getSizeInfo(id) {
      // 通过id获取详情
      await this.$http({
        url: this.$http.adornUrl(`/ordersExpress/ordersDeliveryInfo/${id}`),
        method: "get"
      }).then(res => {                 
        this.formModel.itemList = []; //清空原来的数组
        
        let obj = res.data.data;
        
        if (res.data.status === 200) {
          this.formModel.addressInfo = obj.addressInfo ;
          this.formModel.expressSn = obj.expressSn ;
          this.formModel.id = obj.id ;
          this.formModel.ordersSn = obj.ordersSn;
          this.formModel.ordersStatus = obj.ordersStatus ;
          this.formModel.ordersType = obj.ordersType ;
          this.formModel.phone = obj.phone ;
          this.formModel.recipientName = obj.recipientName ;
          this.formModel.totalPrice = obj.totalPrice ;
          for (let item of obj.itemList) {
            this.formModel.itemList.push(item);
          }
        }else{
         this.$message.error('数据获取失败')
        }
      });
    },
    handleClick(tab, event) {}
  },
  mounted() {
    this.$nextTick(() => {});
  }
};
</script>




<style >
/* @import url(); 引入css类 */

.el-col-form-item .el-form-item .el-form-item__label {
  width: 70px !important;
}
.list-info-el-row-form-item > .el-col-form-item:nth-of-type(3n) {
  margin-top: 20px;
}
.order_goods_list_img {
  width: 100px;
  height: 80px;
  transform: translate(19%, 0);
}
.order_goods_list_img img {
  width: 100%;
  height: 100%;
}
</style>